<template>
  <view>
    <view class="visit-box">
			<view class="business-title">
				<Head1 clasName="padd" icon="index2/quhao" title="业务办理数据" titleColor="#1B1D20" lineColor="#6891FA" arrowColor="#ffffff" url="/pages/business/index"></Head1>
			</view>
			<view class="content-box">
        <DataItem2 clasName="business-item" v-for="(item, i) in list" :key="i" :icon="item.icon" :title="item.title" :val="item.val" :rate="item.rate === '0.00' ? 0 : item.rate"></DataItem2>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onBeforeUnmount, computed } from 'vue'
import Head1 from './head1.vue'
import DataItem2 from '@/components/dataItem2/dataItem2.vue'
import { getReceiveData } from '@/api/getNumber.js'
const list1 = ref([])
const task = ref(null);
const opentask = () => {
  getReceiveData().then((data)=> {
    list1.value = data.data;
  })
}
const list = computed(()=> {
  const val =  list1.value;
  return [
	{ icon: '/static/index1/quhao1.png', title: '今日取号', val: val.takeCount ?? 0},
	{ icon: '/static/index1/quhao2.png', title: '今日预约', val: val.prepareCount ?? 0},
	{ icon: '/static/index1/quhao3.png', title: '正在办理', val: val.workingCount ?? 0},
	{ icon: '/static/index1/quhao4.png', title: '今日等待', val: val.queueCount ?? 0},
];
})
const cleartask = () => {
  if(task.value) {
    clearInterval(task.value);
    task.value = null;
  } 
}
opentask();
task.value = setInterval(opentask, 1000 * 60 *2);
onBeforeUnmount(cleartask);
</script>
<style lang="scss" scoped>

.content-box{
	background: #FFFFFF;
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.1);
	border-radius: 5px;
	padding: 10rpx 0 10px 22rpx;
	display: flex;
	// .business-item {
	// 	display: block!important;
	// 	margin-right: 20rpx;
	// }
}

</style>